<template>
	<view class="relative full-screen">
		<view style="z-index:0;position:absolute;left:0;right:0;top:0;height:317px;background:linear-gradient(180deg, #FA4543 0%, #FA4D40 78.95%, #FCB513 100%);"></view>
		<uni-nav-bar ref="navBar" statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
			<view class="flex center w-full fs-16"><text class="text-white">活动详情</text></view>
		</uni-nav-bar>
		<view v-if="detail" class="flex-col" :style="`height: calc(100vh - ${navBarHeight || 0}px);`">
			<view class="relative radius-12 bg-white mx-16 mt-16 px-12 py-16 fs-14" style="z-index:1;" :style="detail.activeState===4?'filter:brightness(0.8);':''">
				<view class="flex">
					<view class="relative mr-12 flex-shrink">
						<image class="radius-8" style="width:88px;height:88px;" :src="coverPicture"></image>
						<image class="w-32 h-18 absolute" style="top:0;left:-4px;" src="@/static/svg/order/bg-flag.svg"></image>
						<text class="absolute w-24 h-11 text-center" style="font-size:8px;top:2px;left:0;">报名</text>
					</view>
					<view class="flex-1 w-0">
						<tag v-if="detail.promotionLabel" class="mr-4">{{ detail.promotionLabel }}</tag>
						<view class="font-semibold">{{detail.activeTitle}}</view>
						<view class="flex align-end mt-8">
							<view class="flex color-primary mr-8 leading-22" style="align-items:baseline;">
								<text>¥</text><text class="font-semibold fs-21">{{numberFormat(detail.activePrice)}}</text>
							</view>
							<view class="flex text-color-hint text-throughline mr-16 leading-22" style="align-items:baseline;">
								<text>¥</text><text class="font-medium">{{numberFormat(detail.originPrice)}}</text>
							</view>
							<!-- 因为拼团活动单买的场景，这个先去掉 -->
							<!-- <view v-if="detail.stepPriceState===1" class="radius-4 h-21 flex center px-4" style="background:#00AEFF;">
								<image class="w-12 h-12 mr-4" src="@/pagesA/static/svg/icon-people.svg"></image>
								<text class="fs-12 text-white">{{minGroupNum}}人</text>
							</view> -->
						</view>
					</view>
				</view>
				<view v-if="orderInfo && orderInfo.activeStepPrices && orderInfo.activeStepPrices.length" class="mt-8">
					<sign-up-number-tag v-for="(item,index) in orderInfo.activeStepPrices" :key="index" :number="item.enrollNum" 
						:price="numberFormat(orderInfo.activePrice - item.enrollPrice,2)" :type="2" class="mr-8" />
				</view>
				<image v-if="detail.activeState===4" class="absolute" style="width:60px;height:60px;bottom:12px;right:12px;" src="@/pagesA/static/svg/finished.svg"></image>
			</view>
			<view class="mt-8 radius-12 bg-white mx-16" style="z-index:1;">
				<!--
				<view v-if="detail.activeState===4" class="flex center fs-13 py-12">
					<text class="fs-18 font-medium">{{detail.title}}</text>
				</view>
				-->
				<view v-if="detail.activeState !== 4 && remainEndTimeInfo && !remainEndTimeInfo.isEnd" class="flex center fs-13 py-12">
					<text>活动将于</text>
					<text class="radius-4 w-20 h-20 flex center bg-primary text-white mx-3">{{remainEndTimeInfo.day}}</text>
					<text>天</text>
					<text class="radius-4 w-20 h-20 flex center bg-primary text-white ml-3">{{remainEndTimeInfo.hour}}</text>
					<image class="mx-6 w-2 h-7" src="@/pagesA/static/svg/colon.svg"></image>
					<text class="radius-4 w-20 h-20 flex center bg-primary text-white">{{remainEndTimeInfo.min}}</text>
					<image class="mx-6 w-2 h-7" src="@/pagesA/static/svg/colon.svg"></image>
					<text class="radius-4 w-20 h-20 flex center bg-primary text-white mr-3">{{remainEndTimeInfo.sec}}</text>
					<text>结束</text>
				</view>
				<view class="p-16">
					<view v-if="detail.title" class="flex center text-color-regular fs-18 font-medium" v-html="signResultTitle"></view>
					<view v-if="detail.subTitle" class="mt-4 flex justify-center text-color-hint">{{detail.subTitle}}</view>
					<view v-if="detail.enrolledNum <= 5" class="flex justify-center mt-24">
						<image v-for="(item,i) in detail.avatars" :key="i" class="w-50 h-50 cu-avatar round mx-8" style="border:1px solid #FA4543;" :src="item"></image>
						<!-- 因为拼团活动单买的场景，这个先去掉 -->
						<!-- <image v-for="(_,j) in Array.from({length: 5 - detail.avatars.length})" :key="`empty-${j}`" class="w-49 h-49" src="@/pagesA/static/svg/invite-user.svg"></image> -->
					</view> 
					<view v-else-if="detail.enrolledNum > 5" class="flex justify-center">
						<view class="ml-25 flex" style="flex-direction:row-reverse;">
							<image v-for="(item,i) in detail.avatars.filter((_,j) => j < 10)" :key="i" class="w-50 h-50 cu-avatar round" style="border:1px solid #FA4543;margin-left:-25px;" :src="item"></image>
						</view>
						<!-- 因为拼团活动单买的场景，这个先去掉 --> 
						<!-- <image class="w-49 h-49" src="@/pagesA/static/svg/invite-user.svg"></image> -->
					</view>
					<view v-if="detail.buttonState===1" class="mt-28 h-38 bg-primary flex center text-white fs-16" style="border-radius:36px;" @click="toInvite">
						邀请好友
					</view>
					<view v-else-if="detail.buttonState===2" class="mt-28 h-38 bg-primary flex center text-white fs-16" style="border-radius:36px;" @click="toOrder">
						查看订单
					</view>
					<view v-else-if="detail.buttonState===3" class="mt-28 h-38 bg-primary flex center text-white fs-16" style="border-radius:36px;" @click="toPay">
						去支付
					</view>
				</view>
			</view>
			<view v-if="orderInfo" class="mt-8 mx-16 mb-16 radius-12 bg-white px-12 py-16">
				<view class="flex center fs-16 text-bold text-color-regular mb-16">活动详情</view>
				<view v-for="(item,i) in orderInfo.activeContents" :key="i">
					<view v-if="item.type===1" class="text-color-regular fs-14 font-normal leading-22">
						<text v-if="item.content">{{item.content.replace(/\\n/g, '\n')}}</text>
					</view>
					<view v-else-if="item.type===2" class="fs-0">
						<image class="w-full" mode="widthFix" :src="item.content"></image>
					</view>
					<view v-else-if="item.type===3">
						<video :src="item.content"></video>
					</view>
				</view>
			</view>
		</view>
		<share-activity v-if="showSharePopup" :id="detail.id" :show="showSharePopup" @onClose="showSharePopup=false" :options="{groupBuyLabel:detail.promotionLabel}" />
	</view>
</template>

<script setup>
	/**
	 * 报名活动详情
	 */
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import {
		computed,
		onMounted,
		ref,
		watch
	} from 'vue'
	import { orderEnrollActiveDetailApi } from '@/api/order.js'
	import { activeUpdateEnd } from '@/api/activity.js'
	import { endTimeDetail, numberFormat } from '@/utils/index.js'
	import { useOrder } from '@/hooks/useOrder.js'
	import Tag from '@/components/tag/tag.vue'
	
	const id = ref(null)
	const detail = ref(null)
	const { orderInfo, updateOrderInfo, coverPicture, minGroupNum, remainEndTime } = useOrder()
	
	const navBar = ref(null)
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})

	const goBack = () => uni.navigateBack()
	
	const remainEndTimeInfo = ref(null)
	const endTimeCounter = () => {
		setTimeout(() => {
			remainEndTimeInfo.value = remainEndTime()
			if (!remainEndTimeInfo.value.isEnd) {
				endTimeCounter()
			} else {
				// 活动结束时间已到，通知服务端更新状态
				activeUpdateEnd({
					id: id.value,
					activeState: 4
				}).then(() => {
					getDetail()
				})
			}
		}, 1000)
	}
	
	const signResultTitle = computed(() => {
		let str = detail.value.title
		const regex = /\d+/g
		str = str.replace(/(\d*\.?\d+)/g, function(match, val, index) {
			if (index > 2) {
				return `<span class="color-primary">${match}</span>`
			} else {
				return `<span class="color-primary">${match}</span>`
			}
		})
		return str
	})
	
	const getDetail = () => {
		orderEnrollActiveDetailApi({
			id: id.value
		}).then(res => {
			detail.value = res
			updateOrderInfo(res)
			endTimeCounter()
		})
	}
	
	const showSharePopup = ref(false)
	const toInvite = () => {
		showSharePopup.value = true
	}
	
	const toOrder = () => {
		uni.navigateTo({
			url: `/pagesA/order/order-detail?id=${detail.value.orderId}&type=1`
		})
	}
	
	const toPay = () => {
		uni.navigateTo({
			url: `/pagesA/order/wait-pay?id=${detail.value.orderId}`,
			events: {
				// TODO 支付成功后
			}
		})
	}
	
	onLoad((options) => {
		id.value = options.id || ''
		if (id.value) {
			getDetail()
		}
	})
	
	onShareAppMessage((options) => {
		console.log('活动详情分享', options)
		showSharePopup.value = false
		if (options.from === 'button') {
			console.log("options:",options);
			const url = detail.value.promotionType==='GROUP_BUY'
				?`/pagesB/activity/activity-group-buy`
				:`/pagesB/activity/activity`;
			return {
				title: options.target.dataset.title,
				path: `${url}?id=${options.target.dataset.activityId}&_from=pageAOrder`,
				imageUrl: options.target.dataset.filepath
			}
		}
	})
</script>
